    <!-- 特性区域 -->
    <section id="features" class="py-20 bg-light">
      <div class="container mx-auto px-4 sm:px-6 lg:px-8">
        <div class="text-center max-w-3xl mx-auto mb-16">
          <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-4">强大特性，简单使用</h2>
          <p class="text-dark/70 text-lg">Snow 提供了一系列强大而直观的功能，帮助你轻松完成工作</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <!-- 特性卡片 1 -->
          <div class="feature-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-custom">
            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-5">
              <i class="fa fa-bolt text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3">语言层</h3>
            <p class="text-dark/70">module / import / function / loop / if–else / Pratt 表达式解析
              静态类型检查 & 作用域分析</p>
          </div>

          <!-- 特性卡片 2 -->
          <div class="feature-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-custom">
            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-5">
              <i class="fa fa-code-fork text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3">编译器前端</h3>
            <p class="text-dark/70">Lexer / Parser / Semantic Analyzer 全栈自研，生成 JSON-AST</p>
          </div>

          <!-- 特性卡片 3 -->
          <div class="feature-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-custom">
            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-5">
              <i class="fa fa-shield text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3">IR & 后端</h3>
            <p class="text-dark/70">三地址式 IR ➜ 线性扫描寄存器分配 ➜ SnowVM 指令</p>
          </div>

          <!-- 特性卡片 4 -->
          <div class="feature-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-custom">
            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-5">
              <i class="fa fa-globe text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3">虚拟机</h3>
            <p class="text-dark/70">栈 + 寄存器混合架构、GUI 局部变量监视</p>
          </div>

          <!-- 特性卡片 5 -->
          <div class="feature-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-custom">
            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-5">
              <i class="fa fa-cogs text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3">snow pkg</h3>
            <p class="text-dark/70">- .cloud DSL 描述项目、依赖与构建<br>
- 预设 clean / compile / run / package / publish 任务<br>
- 离线缓存与远程仓库解析</p>
          </div>

          <!-- 特性卡片 6 -->
          <div class="feature-card bg-white rounded-xl p-6 shadow-md hover:shadow-lg transition-custom">
            <div class="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center mb-5">
              <i class="fa fa-life-ring text-primary text-xl"></i>
            </div>
            <h3 class="text-xl font-semibold mb-3">CLI</h3>
            <p class="text-dark/70">snow init, snow compile, snow run, snow clean, snow build, snow generate</p>
          </div>
        </div>

        <!-- 数据统计 -->
        <div class="mt-20 grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
          <div class="bg-white p-6 rounded-xl shadow-md">
            <div class="text-4xl font-bold text-primary mb-2" id="counter1">0</div>
            <p class="text-dark/70">活跃用户</p>
          </div>
          <div class="bg-white p-6 rounded-xl shadow-md">
            <div class="text-4xl font-bold text-primary mb-2" id="counter2">0</div>
            <p class="text-dark/70">GitHub星标</p>
          </div>
          <div class="bg-white p-6 rounded-xl shadow-md">
            <div class="text-4xl font-bold text-primary mb-2" id="counter3">0</div>
            <p class="text-dark/70">贡献者</p>
          </div>
          <div class="bg-white p-6 rounded-xl shadow-md">
            <div class="text-4xl font-bold text-primary mb-2" id="counter4">0</div>
            <p class="text-dark/70">下载次数</p>
          </div>
        </div>
      </div>
    </section>
